import 'package:flutter/cupertino.dart';
import 'package:imember/Util/Global.dart';
import 'package:imember/Util/MyColor.dart';
import 'package:imember/Widget/MyButton.dart';
import 'package:imember/Widget/MyImage.dart';

class SeparatePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _SeparatePage();
  }
}

class _SeparatePage extends State {
  int boxNumber = 2;
  int selectedNumber = 1;
  List<Widget> rows = [];

  @override
  Widget build(BuildContext context) {
    rows.clear();
    for (int i = 1; i <= boxNumber; i++) {
      rows.add(SwitchNumberBox(i, selectedNumber == i, onSelected: () {
        setState(() {
          selectedNumber = i;
        });
      }));
    }
    rows.add(AddBtn(onTap: () {
      setState(() {
        boxNumber += 1;
      });
    }));
    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
      SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Container(
            child: Row(children: rows),
          )),
      Container(height: 1, color: MyColor.C4, margin: EdgeInsets.only(top: 12)),
      Expanded(
          child: ListView.separated(
        itemCount: 3,
        itemBuilder: (BuildContext context, int i) {
          return ItemGoods();
        },
        separatorBuilder: (BuildContext context, int index) {
          return Container(height: 1, color: MyColor.C4);
        },
      ))
    ]);
  }
}

class SwitchNumberBox extends StatelessWidget {
  int number;
  bool selected;
  Function()? onSelected;
  Function()? onDeleted;

  SwitchNumberBox(this.number, this.selected, {this.onDeleted, this.onSelected});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Button("第$number箱",
            height: 17,
            width: 60,
            radius: 10,
            bgColor: selected ? MyColor.Orange : MyColor.C99,
            fontSize: 8,
            margin: EdgeInsets.only(left: 6),
            onTap: onSelected),
        selected
            ? Button("- 減少箱數",
                height: 17,
                width: 60,
                radius: 10,
                bgColor: MyColor.Orange,
                isBorderBg: true,
                fontSize: 8,
                margin: EdgeInsets.only(left: 3),
                onTap: onDeleted)
            : Container(),
      ],
    );
  }
}

class AddBtn extends StatelessWidget {
  Function()? onTap;

  AddBtn({this.onTap});

  @override
  Widget build(BuildContext context) {
    return Button("+ 新增箱數",
        height: 17,
        width: 60,
        radius: 10,
        bgColor: MyColor.Orange,
        isBorderBg: true,
        fontSize: 8,
        margin: EdgeInsets.only(left: 3),
        onTap: onTap);
  }
}

class ItemGoods extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        NetImage(
          Global.netImage,
          height: 45,
          width: 45,
          fit: BoxFit.cover,
          padding: EdgeInsets.fromLTRB(0, 12, 7, 12),
        ),
        Expanded(child: Text("data", style: TextStyle(fontSize: 13, color: MyColor.C70))),
        NumberBox(1)
      ],
    );
  }
}

class NumberBox extends StatelessWidget {
  int number;
  Function()? onSub;
  Function()? onAdd;

  NumberBox(this.number, {this.onSub, this.onAdd});

  @override
  Widget build(BuildContext context) {
    return Row(children: [
      Container(
          height: 19,
          width: 19,
          decoration: BoxDecoration(border: Border.all(width: 1, color: MyColor.C70)),
          child: LocalImage("ic_sub_g.png", width: 9, height: 9, padding: EdgeInsets.all(5), onTap: onSub)),
      Container(
          width: 22,
          height: 19,
          alignment: Alignment.center,
          decoration: BoxDecoration(
              border: Border(top: BorderSide(width: 1, color: MyColor.C70), bottom: BorderSide(width: 1, color: MyColor.C70))),
          child: Text("$number", style: TextStyle(fontSize: 11))),
      Container(
          height: 19,
          width: 19,
          decoration: BoxDecoration(border: Border.all(width: 1, color: MyColor.C70)),
          child: LocalImage("ic_add_g.png", width: 9, height: 9, padding: EdgeInsets.all(5), onTap: onAdd))
    ]);
  }
}
